<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor" style="display: none">
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="单位名称">
                            <el-input placeholder="请输入" class="inputW" v-model="param.srcName"></el-input>
                        </el-form-item>
                        <el-form-item label="所在省">
                            <el-select v-model="param.province" @change="provinceChange">
                                <el-option label="所有" value="">

                                </el-option>
                                <el-option
                                        v-for="item in provinceArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所在市">
                            <el-select v-model="param.city" @change="cityChange">
                                <el-option label="所有" value="">

                                </el-option>
                                <el-option
                                        v-for="item in cityArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所在区">
                            <el-select v-model="param.zone" @change="zoneChange">
                                <el-option
                                        v-for="item in zoneArr"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="success" @click="addBtn">创建单位</el-button>
                            <!--                            <el-button type="primary" @click="exportData">导出</el-button>-->
                        </el-form-item>
                    </el-form>
                </div>

                <el-table :data="tableData" style="margin-bottom: 40px;width: 100%" :stripe="true" :border="true" size="mini">
                    <el-table-column  prop="srcName" label="单位名称" align="center" ></el-table-column>
                    <el-table-column prop="province" label="省" align="center"></el-table-column>
                    <el-table-column prop="city" label="市" align="center"></el-table-column>
                    <el-table-column prop="zone" label="区" align="center"></el-table-column>
                    <el-table-column prop="address" label="详细地址" align="center"></el-table-column>
                    <el-table-column prop="manager" label="联系人" align="center"></el-table-column>
                    <el-table-column prop="telephone" label="联系电话" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" width="200">
                        <template  slot-scope="scope">
                            <el-button @click="showDetail(scope.row)" type="primary" icon="el-icon-edit" round size="mini">
                                编辑
                            </el-button>

                            <el-button @click="delete_unit(scope.row)" type="primary" icon="el-icon-delete" round size="mini">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="param.pagesize" :total="totalCount"
                                   :current-page.sync="param.pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑':'增加企业'" :visible.sync="AddVisible" width="85%"  :show-close="false" :close-on-click-modal="false">
            <el-dialog
                    title="定位查询"
                    fullscreen="true"
                    :visible.sync="innerVisible"
                    :before-close="mapClose"
                    append-to-body>
                <div style="width:730px;margin:auto;font-size: 15px">
                    要查询的地址：<input class="mapInput" id="text_" type="text"/>
                    <input type="button" class="mapInput" value="查询" @click="searchByStationName()"/>
                    查询结果(经纬度)：<input class="mapInput" id="result_" type="text"/>
                    <input type="button" class="mapInput" value="确定" @click="innerVisible=false"/>
                    <div id="container"
                         style="position: absolute;
            width: 730px;
            height: 590px;
            border: 1px solid gray;
            overflow:scroll;">
                    </div>
                </div>
            </el-dialog>
            <el-form :model="addForm" ref="addForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="单位名称" prop="srcName" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'企业名称不能为空!',trigger:'blur'}
                            ]">
                            <el-input v-model="addForm.srcName" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系人:" prop="manager" :label-width="formLabelWidth">
                            <el-input v-model="addForm.manager" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话:" prop="telephone" :label-width="formLabelWidth">
                            <el-input v-model="addForm.telephone" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所在地:" :label-width="formLabelWidth">
                            <el-col :span="8">
                                <el-select v-model="addForm.province" @change="provinceChange">
                                    <el-option
                                            v-for="item in provinceArr"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="addForm.city" @change="cityChange">
                                    <el-option
                                            v-for="item in cityArr"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-col>
                            <el-col :span="8">
                                <el-select v-model="addForm.zone" @change="zoneChange">
                                    <el-option
                                            v-for="item in zoneArr"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.name"
                                    >
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址:" prop="address" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'详细地址不能为空!',trigger:'blur'}
                            ]">
                            <el-input v-model="addForm.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="类型:"  :label-width="formLabelWidth">
                            <el-col :span="10">
                            <el-select v-model="addForm.srcType" placeholder="请选择大类"  @change="bigTypeChange">
                                <el-option
                                        v-for="item in bigType"
                                        :key="item.Id"
                                        :label="item.srcTypeName"
                                        :value="item.Id"
                                >
                                </el-option>
                            </el-select>
                            </el-col>
                            <el-col :span="10">
                                <el-select v-model="addForm.srcSubType" placeholder="请选择小类">
                                    <el-option
                                            v-for="item in littleType"
                                            :key="item.Id"
                                            :label="item.srcTypeName"
                                            :value="item.Id"
                                    >
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="经度:" prop="lng" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'经度不能为空!',trigger:'blur'}
                            ]">
                            <el-input v-model="addForm.lng" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纬度:" prop="lat" :label-width="formLabelWidth" :rules="[
                             {required:true,message:'纬度不能为空!',trigger:'blur'}
                            ]">
                            <el-input v-model="addForm.lat" autocomplete="off"></el-input>

                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-button style="float: right" type="primary" @click="getPosition()">定位</el-button>
                    </el-col>

                </el-row>


                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
    <el-button @click="AddVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveClick()">确 定</el-button>
  </span>
        </el-dialog>


    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=GSkyZRDlTKcIqzerwITZvxee"></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            param:{
                page:1,
                pagesize:10,
                province:'',
                zone:'',
                city:'',
                srcName:'',
            },
            tableData:[],
            totalCount:0,
            formLabelWidth:'120px',
            AddVisible:false,
            innerVisible:false,
            addForm:{
                srcType:'',
                srcSubType:'',
            },
            provinceArr:[],
            cityArr:[],
            zoneArr:[],
            businessArr:[],
            EditVisible:false,
            editMod: false,
            bigType:[],
            littleType:[],
        },
        created: function () {
            $('.page').show();
            this.loadData();
            HttpUtil.get('Zone/Child', {parentName: '中国', level: 'province'}).success((res) => {
                this.provinceArr = res.data;
            })
        },
        methods: {
            getPosition() {
                if (!(this.addForm.province && this.addForm.city && this.addForm.zone && this.addForm.address)){
                    this.$message({
                        type:'warning',
                        message:'地址信息不完善'
                    })
                    return;
                }
                this.innerVisible = true;

                setTimeout(() => {
                    var adrr = this.addForm.province + this.addForm.city + this.addForm.zone + this.addForm.address;
                    document.getElementById("text_").value = adrr ? adrr : '';
                    this.getMap();

                }, 1);

            },
            mapClose(done) {
                document.getElementById("text_").value = '';
                document.getElementById("result_").value = '';
                done();
            },
            getMap() {
                var map = new BMap.Map("container");
                map.centerAndZoom("杭州", 12);
                map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
                map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
                map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
                map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
                map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));   //右下角，打开
                this.localSearch = new BMap.LocalSearch(map);
                this.mapView = map;
                this.searchByStationName();
            },
            searchByStationName() {
                this.mapView.clearOverlays();//清空原来的标注
                var keyword = document.getElementById("text_").value;
                this.localSearch.setSearchCompleteCallback((searchResult) => {
                    var poi = searchResult.getPoi(0);
                    document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
                    this.mapView.centerAndZoom(poi.point, 13);
                    var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度

                    let self = this;
                    marker.addEventListener("dragend", function (e) {
                        self.addForm.lng = marker.getPosition().lng;
                        self.addForm.lat = marker.getPosition().lat;
                        document.getElementById("result_").value = marker.getPosition().lng + "," + marker.getPosition().lat;
                    })

                    marker.addEventListener("click", function () {
                        var content = document.getElementById("text_").value + "<br/><br/>经度：" + marker.getPosition().lng + "<br/>纬度：" + marker.getPosition().lat;
                        var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
                        this.openInfoWindow(infoWindow);

                    });
                    this.mapView.addOverlay(marker);
                    marker.enableDragging();
                    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                    this.addForm.lng = marker.getPosition().lng;
                    this.addForm.lat = marker.getPosition().lat;
                });
                this.localSearch.search(keyword);
            },
            provinceChange(value) {
                if (!value){
                    return;
                }
                HttpUtil.get('Zone/Child', {parentName: value, level: 'city'}).success((res) => {
                    this.cityArr = res.data;
                })
            },
            cityChange(value) {
                if (!value){
                    return;
                }
                HttpUtil.get('Zone/Child', {parentName: value, level: 'district'}).success((res) => {
                    this.zoneArr = res.data;
                })
            },
            zoneChange(value){

            },
            showDetail(row) {
                this.cityChange(row.city);
                this.provinceChange(row.province);
                this.bigTypeChange(row.srcType);
                this.addForm = {
                    srcName: row.srcName,
                    Id:row.Id,
                    province:row.province,
                    city:row.city,
                    zone:row.zone,
                    lng:row.lng,
                    lat:row.lat,
                    manager:row.manager,
                    telephone:row.telephone,
                    address:row.address,
                    srcType:parseInt(row.srcType),
                    srcSubType:parseInt(row.srcSubType)
                }

                this.editMod = true;
                this.AddVisible = true;
            },
            addBtn(){
                this.AddVisible = true;
                this.editMod = false;
                this.addForm = {};
            },
            editClick(row) {
                this.EditVisible = true;
            },
            loadData: function () {
                HttpUtil.get('Resource/List',this.param).success((r)=>{
                    if (r.state == 0){
                        this.totalCount = r.total;
                        this.tableData = r.data;
                    }
                })
            },
            exportData() {

            },
            onChangePage(page) {
                this.param.page = page;
                this.loadData();
            },
            search: function () {
                this.param.pageno = 1;
                this.loadData();
            },
            delete_unit(row){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    HttpUtil.get('Resource/delete', {Id:row.Id}).success((res) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.param.pageno = 1;
                        this.loadData();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            saveClick(){
                if (!validUtil.number(this.addForm.telephone)){
                    this.$message.warning('电话必须为数字')
                    return
                }
                if (this.editMod){
                    this.$refs['addForm'].validate((valid)=>{
                        if (valid){
                            HttpUtil.get('Resource/Update', this.addForm).success((res) => {
                                if (res.state==0){
                                    this.addForm = {};
                                    this.AddVisible = false;
                                    this.editMod = false;
                                    this.loadData();
                                }else {
                                    this.$message({
                                        type:'error',
                                        message:res.errMsg
                                    })
                                }

                            });
                        }
                    })
                } else {
                    this.$refs['addForm'].validate((valid) =>{
                        if (valid){
                            if (this.addForm.province && this.addForm.city && this.addForm.zone){
                                            HttpUtil.get('Resource/Add', this.addForm).success((r) => {
                                                if (r.state == 0){
                                                    this.$message({
                                                        type: 'success',
                                                        message: '添加成功'
                                                    });
                                                    this.addForm = {};
                                                    this.AddVisible = false;
                                                    this.editMod = false;
                                                    this.loadData();
                                                }else {
                                                    this.$message({
                                                        type:'error',
                                                        message:r.errMsg
                                                    })
                                                }
                                            });
                                }
                            }else {
                                this.$message.warning('请完善省市区信息！')
                            }

                    })
                }

            },


            getResourceType(){
                HttpUtil.get('resourceType/list',{}).success((r)=>{
                    this.bigType = r.data;
                })
            },
            bigTypeChange(val){
                HttpUtil.get('resourceType/list',{parentId:val}).success((r)=>{
                    this.littleType = r.data;
                })
            }
        },
        mounted: function () {
                  this.getResourceType();
        }
    });
</script>
</body>
</html>
